{extend name="$BASE_LIST" /}
{block name="body"}
<div class="right-main ui-form">
    <div class="page_nav" id="js_page_nav"><span class="page_title">{$page_nav}</span></div>       
    <div id="js_main_header" class="main_header">
        <div>
<!--            <span class="frm_input_box search append">-->
<!--                <a href="javascript:void(0);" id="js_search" class="frm_input_append">-->
<!--                    <i class="icon wb-search" title="搜索"></i>-->
<!--                </a>-->
<!--                <input type="text" id="js_keyword" placeholder="请输入标题" value="" class="frm_input" />-->
<!--            </span>-->
            <span class="right">       
                <button type="button" id="js_addBtn" class="btn btn-primary"><i class="icon wb-plus"></i> 添加{$page_nav}</button>
            </span>
        </div>
    </div>    
    <table id="grid-table"></table>    
</div>
{/block}
{block name="script"}
<script type="text/javascript">
    var page_nav = "{$page_nav}";
    function formatOper(value, row, index) {
        var html = '<span class="grid-operation">';
        html += '<button type="button" onclick="edit(' + row['id'] + ', 0)" class="btn btn-xs btn-default view-btn"><i class="icon wb-edit"></i>修改</button>';
        html += '<button type="button" onclick="del(' + row['id'] + ')" class="btn btn-xs btn-default del-btn"><i class="icon wb-close"></i>删除</button>';
        html += '</span>';
        return html;
    }
    $(function () {

        $('#grid-table').datagrid({
            url: getURL('loadList'),
            method: "GET",
            height: getGridHeight(),
            singleSelect: false,
            remoteSort: false,
            rownumbers: true,
            multiSort: true,
            emptyMsg: '<span>无相关数据</span>',
            pagination: true,
            pageSize: 20,
            columns: [[
                    {field: 'name', title: '客户名称', width: 120, align: 'center'},
                    {field: 'contact', title: '联系号码', width: 200, align: 'center'},
                    {field: 'create_time', title: '添加时间', width: 200, align: 'center'},
                    {field: '_oper', title: '操作', width: 140, align: 'center', sortable: true, formatter: formatOper}
                ]]
        });

        //设置分页控件 
        var p = $('#grid-table').datagrid('getPager');
        $(p).pagination({
            pageSize: 20, //每页显示的记录条数，默认为10 
            pageList: [20, 30, 50]
        });

    });

    $("#col_main").resize(function () {
        $('#grid-table').datagrid('resize', {
            height: getGridHeight()
        });
    });

    $("#js_addBtn").click(function () {
        var url = getURL('edit');
        openBarWin('添加'+page_nav, 900, 350, url, function () {
            reload();
        });
    });

    function edit(id, act) {
        var url = getURL('edit', 'id=' + id + '&act=' + act);
        openBarWin('编辑'+page_nav, 900, 350, url, function () {
            reload();
        }, ['保存', '取消']);
    }

    function del(id) {
        confirm("确认要删除此数据吗？", function () {
            var url = getURL('del');
            $.getJSON(url, {id: id}, function (json) {
                if (json.success)
                    reload();
                else
                    alert(json.message);
            });
        });
    }

    $("#js_search").click(function () {
        reload();
    });

    function reload() {
        var keyword = $("#js_keyword").val();
        $('#grid-table').datagrid('reload', {
            keyword: keyword
        });
    }

</script>
{/block}